<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="author" content="林镭特">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
      <!-- 省份：provinceIndex记录所选中的省份的索引值 -->
    
      <select v-model="provinceCode">
        <option disabled value="">请选择</option>
        <!-- 使用for遍历省份，index的值是0 1 2 3... 正好对应所选中省份的索引值，使用v-model关联选中的省份的索引值，比如选中第二项，index是1，provinceIndex正好也是1，让index的值赋值给provinceIndex，正好记录所选中的省份索引值 -->
        <option v-for="(p, index) in provinces" :value="p.code">{{p.name}}</option>
    </select>
    <!-- 城市：根据选中省份的索引值找到对应的城市 -->
    <template v-if="provinceCode!= '' ">
        <select v-model="cityCode">
            <option disabled value="">请选择</option>
            <option v-for="(city, index) in cities" :value="city.code" v-if="city.provinceCode==provinceCode" >{{city.name}}</option>
        </select>
    </template>

   
    <!-- 区：先根据省份的索引值找到城市，在根据城市的索引值找到对应的区 -->

    <template v-if="cityCode != '' " >
        <select v-model="areaIndex">
            <option disabled value="">请选择</option>
            <option v-for="(area, index) in areas" :value="area.code"  v-if="area.provinceCode==provinceCode && area.cityCode==cityCode" >{{area.name}}</option>
        </select>
    </template>
   
</div>


<script src="./provinces.js"></script>
<script src="./cities.js"></script>
<script src="./areas.js"></script>
<script>
let app = new Vue({
    el: '#app',
    data: {
        provinces:provinces,
        cities:cities,
        areas:areas,
        provinceCode:'',
        cityCode:'',
        areaIndex:''
    },
    watch: {
        provinceCode(){
            // 当省份的值发生变化的时候，重置城市和区的显示
            this.cityCode = '';
            this.areaIndex = '';
        },
       
    },
});
</script>
</body>
</html>